<script setup lang="ts">
import { ref, watch, defineEmits, onMounted } from 'vue';

const jobTypeOptions = [
  {
    label: '入库作业',
    value: 1,
  },
  {
    label: '拣选作业',
    value: 2,
  },
  {
    label: '出库作业',
    value: 3,
  },
];

const jobType = ref<number | undefined>(undefined);
const jobDate = ref<any>(null);
const workTableData = ref<any[]>([]);
const workTableDatas = ref<any[]>([]);
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);

const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: 60,
  },
  {
    title: '作业类型',
    dataIndex: 'jobType',
    align: 'center',
    slotName: 'jobType',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
  },
  {
    title: '作业ID',
    dataIndex: 'jobId',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
  },
  {
    title: '作业时间',
    dataIndex: 'jobDateTime',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
  },
  {
    title: '订单处理时间(小时)',
    dataIndex: 'orderProcessingTime',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 150,
  },
  {
    title: '作业完成率',
    dataIndex: 'jobCompletionRate',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
  },
  {
    title: '订单准时率',
    dataIndex: 'orderPunctualityRate',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
  },
  {
    title: '作业时长(分钟)',
    dataIndex: 'operationTime',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
  },
  {
    title: '设备利用率',
    dataIndex: 'equipmentUtilizationRate',
    align: 'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 120,
  },
];

function getRandomDate() {
      const start = new Date(2022, 0, 1);
      const end = new Date();
      const date = new Date(
        start.getTime() + Math.random() * (end.getTime() - start.getTime())
      );
      return date.toISOString().split("T")[0];
    }

function createData() {
  workTableData.value = Array.from({ length: 101 }, (_, index) => ({
    index: index + 1,
    jobType:
      jobTypeOptions[Math.floor(Math.random() * jobTypeOptions.length)].value,
    jobId: `JOB-${Math.floor(Math.random() * 10000)}`,
    jobDateTime: getRandomDate(),
    orderProcessingTime: (Math.random() * 24).toFixed(1),
    orderPunctualityRate: `${(Math.random() * 100).toFixed(2)}%`,
    operationTime: (Math.random() * 3600).toFixed(0),
    equipmentUtilizationRate: `${(Math.random() * 100).toFixed(2)}%`,
    jobCompletionRate: `${(Math.random() * 100).toFixed(2)}%`,
  }));
}

function paginatedData() {
  const start = (pageNum.value - 1) * pageSize.value;
  const end = start + pageSize.value;

  return workTableDatas.value.slice(start, end);
}

async function getJobAnalysis() {
  if (workTableData.value.length === 0) {
    createData();
  }
  workTableDatas.value = workTableData.value.filter((item) => {
    const jobTypeFind = jobType.value
      ? item.jobType === jobType.value
      : true;
    const jobDateFind = jobDate.value ? item.jobDateTime === jobDate.value : true;

    return jobTypeFind && jobDateFind;
  });
  total.value = workTableDatas.value.length;
  workTableDatas.value = paginatedData();
  
}

onMounted(() => {
  getJobAnalysis();
});

function reset() {
  jobType.value = undefined;
  jobDate.value = '';
  getJobAnalysis();
}

function change(e: any) {
  pageNum.value = e;
  getJobAnalysis();
}
function changeSize(e: any) {
  pageSize.value = e;
  getJobAnalysis();
}
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">作业能效与资源分析</div>
      </template>
      <div class="content">
        <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="6">
            <a-select v-model="jobType" allow-clear placeholder="作业类型" size="large">
              <a-option
                v-for="item of jobTypeOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}
              </a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div>
              <a-date-picker
                v-model="jobDate"
                style="width: 100%"
                placeholder="作业日期"
                size="large"
              />
            </div>
          </a-col>
          <a-col :span="6">
            <a-button
              type="primary"
              size="large"
              style="margin-right: 10px"
              @click="getJobAnalysis"
              >查询</a-button
            >
            <a-button class="btn-reset" size="large" @click="reset"
              >重置</a-button
            >
          </a-col>
        </a-row>
        <div class="table-container">
          <a-table
            :stripe="true"
            class="top-table"
            :pagination="false"
            :columns="columns"
            column-resizable
            :data="workTableDatas"
            :scroll="{ y: 400 }"
            style="margin-top: 10px"
          >
            <template #index="{ record }">{{
              workTableDatas.indexOf(record) + 1
            }}</template>
            <template #jobType="{ record }">
                {{jobTypeOptions.find((item) => item.value === record.jobType)?.label}}
            </template>
          </a-table>
          <div class="page-position">
            <a-pagination
              :total="total"
              :current="pageNum"
              :page-size="pageSize"
              show-total
              show-jumper
              show-page-size
              @change="change"
              @update:pageSize="changeSize"
            />
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.top-table {
  height: 100%;
}
.flow-query {
  margin: 0px;
  padding: 10px;
  height: 100%;
}
.card-title {
  font-size: 24px;
}
.content {
  display: flex;
  flex-direction: column;
}
.table-container {
  position: relative;
  overflow: hidden; /* 确保没有多余的滚动条 */
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
